<template>
  <div class="maxbox chart">
    <div id="chartOnline" class="maxbox"></div>
    <div class="count pt30">
      <p>在线数量：<span class="primary">180个</span></p>
      <p>离线数量：<span>42个</span></p>
    </div>
  </div>
</template>

<script>
let echarts = require("echarts");
export default {
    components: {},
    props: {},
    data() {
        return {
            chart: null
        };
    },
    created() { },
    mounted() {
        this.$nextTick(() => {
            this.creatChart();
          
        });
    },
    methods: {
        creatChart() {
            const handred = 100;
            let point = 75;
            let option = {
                title: {
                    text: point + '%',
                    x: 'center',
                    y: 'center',
                    textStyle: {
                        fontWeight: 'normal',
                        color: '#fff',
                        fontSize: '24'
                    }
                },
                /* grid: {
                    right: '50',
                    bottom: '15%',
                    top: '15%',
                    containLabel: true
                }, */

                tooltip: {
                    formatter: function(params) {
                        return params.name + '：' + params.percent + ' %';
                    }
                },
                /* legend: {
                    show: true,
                    itemGap: 12,
                    data: ['在线', '离线']
                }, */

                series: [{
                    name: 'circle',
                    type: 'pie',
                    clockWise: true,
                    startAngle: 0,
                    radius: ['38%', '60%'],
                    itemStyle: {
                        normal: {
                            label: {
                                show: false
                            },
                            labelLine: {
                                show: false
                            }
                        }
                    },
                    hoverAnimation: false,
                    data: [{
                        value: point,
                        name: '在线',
                        itemStyle: {
                            normal: {
                                color: { // 颜色渐变
                                    colorStops: [{
                                        offset: 0,
                                        color: '#28E8FA' // 0% 处的颜色
                                    }, {
                                        offset: 1,
                                        color: '#4FADFD' // 100% 处的颜色
                                    }]
                                },
                                label: {
                                    show: false
                                },
                                labelLine: {
                                    show: false
                                }
                            }
                        }
                    }, {
                        name: '离线',
                        value: handred - point,
                        itemStyle: {
                            normal: {
                                color: '#71717d'
                            }
                        }
                    }]
                }]
            };

            this.chart = echarts.init(document.getElementById('chartOnline'));
            this.chart.setOption(option);
        }
    }
};
</script>

<style lang="less" scoped>

@import '@/theme/theme.less';
@sm: ~"(max-width:1599px)";
.chart{
    padding-left: 150px;
}
.count{
    position: absolute;
    left: 0;
    top: 0;

    p{
        padding: 15% 30px ;
        @media @sm {
            padding: 5% 30px ;
        }
        span{
            font-size: 22px;
        }
    }
}
</style>
